import React, { FC, useEffect, useRef, useState } from 'react'
import './index.scss'
import Img from '@/assets/images/404.png'
import { useCountDown } from 'ahooks'
import { history } from 'umi'

interface spanObj {
    left: string,
    top: string,
    transform: string,
    animationDelay: string,
    background: string
}
const NotFound: FC = () => {
    const bgstar: any = useRef()
    const [spanList, setSpanList] = useState<spanObj[]>([])

    const [targetDate, setTargetDate] = useState<number>(0)
    const [countdown] = useCountDown({
        targetDate,
        onEnd: () => {
            history.push('/login')
        },
    });
    const getSpanListInit = () => {
        let width = bgstar.current.clientWidth;
        let height: any = document.getElementById('bgstar')?.clientHeight;
        console.log(width, height)
        for (var i = 0; i < 520; i++) {
            var left = Math.round(Math.random() * width)
            var top = Math.round(Math.random() * height)

            var scaler = Math.random() * 1.5;
            var rate = Math.random() * 2.5;

            var r = Math.random() * 255;
            var g = Math.random() * 255;
            var b = Math.random() * 255;
            var a = Math.random()

            spanList.push({
                left: left + 'px',
                top: top + 'px',
                transform: `scale('${scaler}')`,
                animationDelay: rate + 's',
                background: `rgba(${255},${255},${255},${a})`
            })
        }
        setSpanList([...spanList])
    }


    useEffect(() => {
        getSpanListInit()
        setTargetDate(Date.now() + 5000);
    }, [])
    return (
        <div className='errorpage' id="bgstar" ref={bgstar} >
            <img src={Img} alt="" className="myimg" />
            {
                spanList.map((l, i) => {
                    return (
                        <span key={i} className="spandot" style={l} ></span>
                    )
                })
            }
            <div className="down" onClick={() => history.push('/login')}>
                {Math.round(countdown / 1000)} S后跳转
            </div>
        </div>
    )
}

export default NotFound